<template>
	<view style="width: 100%; height: 100%;background-color: #70552d;">
		<view :style="{height: sConf.tH+'px'}"></view>
		<!-- 加载组件 -->
		<view style="padding: 10px;display: flex;flex-direction: column;justify-content: center;
		align-items: center; ">
			<canvas type="2d" id="myCanvas" style="border-radius: 10px;"
				:style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas>
			<view style="display: flex;justify-content: space-around;width: 100%;padding: 15px 0;">
				<button class="gl-button-base" hover-class="gl-button-base-hover"
					style="display: flex;align-items: center;gap: 5px;" @tap="saveQrCode">
					<tn-icon name="download-simple" color="#fff" size="32"></tn-icon>
					<text style="font-size: small;">保存到相册</text></button>
				<button class="gl-button-base" hover-class="gl-button-base-hover" open-type="share"
					:data-obj="{image:code}" style="display: flex;align-items: center;gap: 5px;">
					<tn-icon name="share" color="#fff" size="32"></tn-icon>
					<text style="font-size: small;">分享到微信</text></button>
			</view>

		</view>
		<!-- 顶部自定义导航 -->
		<tn-navbar :placeholder="true" fixed bg-color="#70552d" text-color="#f3eacd"> {{title}}
		</tn-navbar>
	</view>
</template>

<script>
	import utils from '@/common/utils';
	import saveImage from '@/common/saveImage';
	export default {
		data() {
			return {
				title: '个人名片',
				sConf: getApp().globalData,
				canvasWidth: 380,
				canvasHeight: 590,
			}
		},
		onReady() {
			this.viewDrawToCanvas()
		},
		onShareAppMessage(e) {
			console.log('onShareAppMessage', e.target.dataset.obj);
			let obj = e.target.dataset.obj
			let url = this.sConf.pics;
			return {
				title: '悦玺云商 ' + this.sConf.auth.nicename,
				path: '/pages/index/index?staff=' + this.sConf.auth.id,
				imageUrl: url + obj.image
			}
		},
		onShareTimeline(e) {
			console.log('onShareTimeline', e);
			let obj = e.target.dataset.obj
			let url = this.sConf.pics;
			let args = 'staff=' + this.sConf.auth.id;
			return {
				title: '悦玺云商 ' + this.sConf.auth.nicename,
				path: '/pages/index/index',
				imageUrl: url + this.sConf.auth.qrcode,
				query: args
			}
		},
		props: {
			code: {
				type: String,
				default: '/media/qrcode/release_2.jpg'
			},
			name: {
				type: String,
				default: '新用户'
			}
		},
		methods: {
			async viewDrawToCanvas() {
				console.log('viewDrawToCanvas');
				const cos = 'https://media-1335096253.cos.ap-chengdu.myqcloud.com';

				let res = await this.getImageInfo(cos + '/media/default/1_qrcode.jpg')
				if (res.errMsg !== "getImageInfo:ok") {
					uni.showToast({
						title: '加载背景失败'
					})
					return
				}
				let rec = await this.getImageInfo(cos + this.code)
				if (rec.errMsg !== "getImageInfo:ok") {
					uni.showToast({
						title: '加载个人码失败'
					})
					return
				}
				this.drawQrcode(res, rec)
			},
			drawQrcode(res, rec) {
				console.log('drawQrcode');
				let that = this
				wx.createSelectorQuery().select('#myCanvas').node(({
					node: canvas
				}) => {
					const ctx = canvas.getContext('2d')
					canvas.width = that.canvasWidth
					canvas.height = that.canvasHeight


					let bg = canvas.createImage()
					bg.src = res.path
					bg.onload = () => {
						ctx.drawImage(bg, 0, 0, canvas.width, canvas.height)
						ctx.save()
						// 加载文本
						ctx.font = '32px SimSun'
						ctx.fillStyle = '#333333'
						ctx.fillText(that.name, 35, 440, 180)
						// 绘制体验版
						if (this.sConf.run !== 'release') {
							ctx.font = '16px SimSun'
							ctx.fillText('体验版', 260, 460)
						}
						console.log('绘制背景');

						let code = canvas.createImage()
						code.src = rec.path
						code.onload = () => {
							// QrCode中心位置
							let cx = 280
							let cy = 350

							// 裁剪背景区域
							ctx.beginPath()
							ctx.arc(cx, cy, 84, 0, Math.PI * 2, false)
							ctx.closePath()
							ctx.clip()

							// 背景填充				
							ctx.fillStyle = '#ffffff'
							ctx.fillRect(cx - 84, cy - 84, 168, 168)
							ctx.save()
							console.log('绘制二维码背景');


							// QrCoded填充
							ctx.drawImage(code, cx - 64, cy - 64, 128, 128)
							ctx.save()
							console.log('绘制二维码图像');

							// 边框填充			
							ctx.beginPath()
							ctx.arc(cx, cy, 74, 0, Math.PI * 2, false)
							ctx.strokeStyle = "#b58d63"
							ctx.lineWidth = 3
							ctx.closePath()
							ctx.stroke()
							ctx.save()
							console.log('绘制二维码边框');
						}
					}





				}).exec()
			},
			/**
			 * 加载图像
			 */
			getImageInfo(e) {
				return new Promise((req, rej) => {
					// console.log('下载图像', e);
					uni.getImageInfo({
						src: e,
						success(r) {
							req(r)
						},
						fail(e) {
							rej(e)
						}
					})
				})
			},
			saveQrCode() {
				console.log('saveQrCode');
				let that = this
				wx.createSelectorQuery().select('#myCanvas').node(({
					node: canvas
				}) => {
					uni.canvasToTempFilePath({
						canvas: canvas,
						fileType: 'png',
						quality: '1',
						success(r) {
							console.log('临时文件路径', r);
							that.saveImageToPhotosAlbum(r.tempFilePath)
						}
					})
				}).exec()
			},
			async saveImageToPhotosAlbum(img) {
				let auth = await saveImage.hasAuthSetting()
				uni.saveImageToPhotosAlbum({
					filePath: img,
					success(r) {
						uni.showToast({
							title: '保存成功'
						})
					},
					fail(e) {
						console.log('保存到相册', e);
						uni.showToast({
							title: '保存失败'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.canvas-poster {
		position: fixed;
		top: 100%;
		left: 100%;
	}
</style>